<template>
    <div>
      <div id="container"></div>
  
      <HelloWorld :info="state.info" id="html"/>
    </div>
   
  </template>
  
  <script setup>
  import HelloWorld from '@/components/HelloWorld.vue'
  import * as THREE from 'three'
  import * as TWEEN from 'three/examples/jsm/libs/tween.module.js'
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
  // import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
  import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
  import { gsap } from "gsap";
  import { onMounted, reactive } from 'vue';
  
  const state = reactive({
    info:null
  })
  let scene ,camera,renderer,controls,highlightMaterial,currentIntersected,tooltip,loader ;
  scene = new THREE.Scene()
  camera = new THREE.PerspectiveCamera();
  loader = new GLTFLoader();

  camera.position.set(500,1000,500)
  camera.lookAt(0,0,0)
  scene.add(camera)
  let selectedObject = null
  

  const createSprites = ()=>{
    const material = new THREE.SpriteMaterial()
    let size = 2000;
    
    for(let i=0;i<size;i++){
      
      const particle = new THREE.Sprite(material)
      const x = (Math.random() * size + Math.random() * size) / 2 - size / 2
      const y = (Math.random() * size + Math.random() * size) / 2 - size / 2
      const z = (Math.random() * size + Math.random() * size) / 2 - size / 2
      particle.position.set(x,y,z)
      particle.scale.set(2,2,2)
      particle.date={
        name:'标题12123',
        desc:'哈哈哈'
      }
      gsap.to(particle.position,{
        duration: 300,//Math.random() * 10 + 2,
        z: 1000,
        ease: "linear",
        repeat: -1,
      })
      scene.add(particle)
      
    }
  }
  
  //创建粒子
  const createRender = ()=>{
    const container = document.getElementById('container');
    renderer = new THREE.WebGLRenderer({antialias:true,alpha:true})
    renderer.setSize(window.innerWidth,window.innerHeight)
    renderer.shadowMap.enabled = true
    renderer.shadowMap.type = THREE.PCFSoftShadowMap
    renderer.setClearColor(0x000000,1)
    controls = new OrbitControls(camera, renderer.domElement)
    controls.enableDamping = true; // 添加阻尼效果
    controls.dampingFactor = 0.03; // 设置阻尼因子
    controls.minDistance = 1; // 最小距离
    controls.maxDistance = 950; // 最大距离
    container.appendChild(renderer.domElement)
  }
  
  //渲染
  const render = ()=>{
    controls.update()
    requestAnimationFrame(render);
    renderer.render(scene, camera);
  }
  
  
  
  const moveClick = (event)=>{
   
    const raycaster = new THREE.Raycaster()
    const pointer = new THREE.Vector2()
    pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
    pointer.y = - (event.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(pointer,camera)
    let intersects = raycaster.intersectObjects(scene.children, true);
    TWEEN.update()
    if (intersects.length > 0){
      if (selectedObject !== intersects[0].object && selectedObject && currentIntersected){
          currentIntersected.material = selectedObject;
          currentIntersected = null;
          handleMouseLeave(selectedObject);
        return
      }
      selectedObject = intersects[0].object;
      handleMouseEnter(selectedObject,event);
    // 触碰变颜色
    currentIntersected = selectedObject;
    }else{
      tooltip.style.display = 'none';
      currentIntersected=null
      if (selectedObject){
        handleMouseLeave(selectedObject);
        selectedObject = null;
      }
    }
  }
  const handleMouseEnter = (sprite,event)=>{
    
    const targetScale = 3.5;
    new TWEEN.Tween(sprite.scale).to({ x: targetScale, y: targetScale, z: targetScale }, 20).easing(TWEEN.Easing.Linear.None).start();
    tooltip.style.display = 'block';
    tooltip.style.left = (event.clientX-30 ) + 'px';
    tooltip.style.top = (event.clientY - 45) + 'px';
    currentIntersected = sprite;
    state.info = sprite.date
    // tooltip.innerHTML = intersects[0].object.name;
      // currentIntersected.material = new THREE.MeshBasicMaterial({color:"#1ea6b9"});
  }
  
  const handleMouseLeave = (sprite)=>{
    const targetScale = 2;
    new TWEEN.Tween(sprite.scale)
      .to({ x: targetScale, y: targetScale, z: targetScale }, 20)
      .easing(TWEEN.Easing.Linear.None)
      .start();
      
  }
  
  onMounted(()=>{
    createSprites()
    createRender()
    render()
    window.addEventListener('resize',()=>{renderer.setSize(window.innerWidth, window.innerHeight);})
    window.addEventListener("mousemove", moveClick, false);
  
    const container = document.getElementById('container');
  tooltip = document.getElementById('html')
  tooltip.style.position = 'absolute';
  tooltip.style.zIndex = '999';
  tooltip.style.background = '#e0e7e8';
  tooltip.style.padding = '4px';
  tooltip.style.border = '1px solid #ccc';
  tooltip.style.display = 'none';
  container.appendChild(tooltip)
  })
  
  </script>
  <style>
  canvas {
    display: block;
  }
  </style>